<template>
  <div class="notice-box" v-if="isShow">
    <h3>{{ title }}</h3>
    <h4>{{ text }}</h4>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    text: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    show() {
      this.isShow = true;
      setTimeout(() => {
        this.hide();
      }, 2000);
    },
    hide() {
      this.isShow = false;
      this.remove();
    },
  },
  
};
</script>
<style scoped>
.notice-box {
  position: absolute;
  top: 20px;
  right: 0px;
  width: 200px;
  height: 100px;
  background: #fafafa;
  border: 1px soild #fafafa;
  box-shadow: 0 0 0 0 #fafafa;
}
</style>
